<script lang="ts" setup>
import {computed, defineModel, ref} from 'vue'
import BigNumber from 'bignumber.js'

defineOptions({
	name: ''
})
const props = defineProps({
	minRange: Object,
	maxRange: Object
})
const model = defineModel<any>() // 双向绑定
const minNum = ref()
const maxNum = ref()

const setNumModel = () => {
	if (minNum.value >= maxNum.value) {
		maxNum.value = BigNumber(minNum.value).plus(props.minRange?.step || 1).toNumber()
	}
	model.value = [minNum.value, maxNum.value]
}

const getMin = computed(() => {
	return BigNumber(minNum.value).plus(props.maxRange?.step || 1).toNumber()
})
</script>

<template>
	<el-row>
		<el-col :span="11">
			<el-input-number
				v-model="minNum"
				v-bind="minRange"
				@change="setNumModel"
			/>
		</el-col>
		<el-col :span="2">
			<span style="display: block; text-align: center;">~</span>
		</el-col>
		<el-col :span="11">
			<el-input-number
				v-model="maxNum"
				:min="getMin"
				v-bind="maxRange"
				@change="setNumModel"
			/>
		</el-col>
	</el-row>
</template>

<style lang="scss" scoped></style>
